/********************************************************************
 * openWYSIWYG color chooser Copyright (c) 2006 openWebWare.com
 * Contact us at devs@openwebware.com
 * This copyright notice MUST stay intact for use.
 *
 * $Id: wysiwyg-color.js,v 1.1 2007/01/29 19:19:49 xhaggi Exp $
 ********************************************************************/
function WYSIWYG_Color() {

    // colors
    var COLORS = new Array(
            "#000000", "#993300", "#333300", "#003300", "#003366", "#000080",
            "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000",
            "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900",
            "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999",
            "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00CCFF", "#993366",
            "#C0C0C0", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF",
            "#99CCFF", "#666699", "#777777", "#999999", "#EEEEEE", "#FFFFFF"
            );

    // div id of the color table
    var CHOOSER_DIV_ID = "colorpicker-div";

    /**
     * Init the color picker
     */
    this.init = function() {
        var div = document.createElement("DIV");
        div.id = CHOOSER_DIV_ID;
        div.style.position = "absolute";
        div.style.visibility = "hidden";
        document.body.appendChild(div);
    };


    /**
     * Open the color chooser to choose a color.
     * 
     * @param {String} element Element identifier 
     */
    this.choose = function(element) {
        var div = document.getElementById(CHOOSER_DIV_ID);
        if (div == null) {
            alert("Initialisation of color picker failed.");
            return;
        }

        // writes the content of the color picker
        write(element);

        // Display color picker
        var x = window.event.clientX + document.body.scrollLeft;
        var y = window.event.clientY + document.body.scrollTop;
        var winsize = windowSize();
        if (x + div.offsetWidth > winsize.width)
            x = winsize.width - div.offsetWidth - 5;
        if (y + div.offsetHeight > winsize.height)
            y = winsize.height - div.offsetHeight - 5;
        div.style.left = x + "px";
        div.style.top = y + "px";
        div.style.visibility = "visible";
    };

    /**
     * Set the color in the given field
     *
     * @param {String} n Element identifier
     * @param {String} color HexColor String
     */
    this.select = function(n, color) {
        var div = document.getElementById(CHOOSER_DIV_ID);
        var elm = document.getElementById(n);
        elm.value = color;
        elm.style.color = color;
        elm.style.backgroundColor = color;
        div.style.visibility = "hidden";
    }


    /**
     * Write the color table
     * @param {String} n Element identifier
     * @private
     */
    function write(n) {

        var div = document.getElementById(CHOOSER_DIV_ID);

        var output = "";
        output += '<table border="1" cellpadding="0" cellspacing="0" class="wysiwyg-color-picker-table"><tr>';
        for (var i = 0; i < COLORS.length; i++) {
            var color = COLORS[i];
            output += '<td class="selectColorBorder" ';
            output += 'onmouseover="this.className=\'selectColorOn\';" ';
            output += 'onmouseout="this.className=\'selectColorOff\';" ';
            output += 'onclick="WYSIWYG_ColorInst.select(\'' + n + '\', \'' + color + '\');"> ';
            output += '<div style="background-color:' + color + ';" class="wysiwyg-color-picker-div">&nbsp;</div> ';
            output += '</td>';

            if (((i + 1) % Math.round(Math.sqrt(COLORS.length))) == 0) {
                output += "</tr><tr>";
            }
        }

        output += '</tr></table>';

        // write to div element
        div.innerHTML = output;
    }
    ;

    /**
     * Set the window.event on Mozilla Browser
     * @private
     */
    function _event_tracker(event) {
        if (!document.all && document.getElementById) {
            window.event = event;
        }
    }
    document.onmousedown = _event_tracker;

    /**
     * Get the window size
     * @private
     */
    function windowSize() {
        if (window.innerWidth) {
            return {width: window.innerWidth, height: window.innerHeight};
        }
        else if (document.body && document.body.offsetWidth) {
            return {width: document.body.offsetWidth, height: document.body.offsetHeight};
        }
        else {
            return {width: 0, height: 0};
        }
    }
}

var WYSIWYG_ColorInst = new WYSIWYG_Color();